<template>
  <div class="studentdetail">
    <el-card shadow="always"
             :body-style="{ padding: '10px' }">
      <div id="magicalDragScene detailtable"
           class="mc-root">
        <el-row>
          //搜索区域
          <el-col :span="24">
            <el-row type="flex"
                    justify="start">
              <el-col class="mc-ui-flex-start aligncenter"
                      :span="6">
                <div class="mc-test-tag">校区：</div>
                <el-select v-model="schoolValue"
                           @change="schoolChange"
                           placeholder="校区">
                  <el-option v-for="(item, index) in universityList"
                             :key="index"
                             :label="item"
                             :value="index">
                  </el-option>
                </el-select>
              </el-col>
              <el-col class="mc-ui-flex-start aligncenter"
                      :span="6">
                <div class="mc-test-tag">学院：</div>
                <el-select v-model="collegeValue"
                           @change="collegeChange"
                           placeholder="学院">
                  <el-option v-for="(item, index) in collegeList"
                             :key="index"
                             :label="item.name"
                             :value="index">
                  </el-option>
                </el-select>
              </el-col>
              <el-col class="mc-ui-flex-start aligncenter"
                      :span="6">
                <div class="mc-test-tag">专业：</div>
                <el-select v-model="classValue"
                           placeholder="专业">
                  <el-option v-for="(item, index) in classList"
                             :key="index"
                             :label="item.name"
                             :value="index">
                  </el-option>
                </el-select>
              </el-col>
              <el-col class="mc-ui-flex-start aligncenter"
                      :span="6">
                <div class="mc-test-tag">年级：</div>
                <el-input v-model="input"
                          placeholder="请输入要查询的班级"></el-input>
                <el-row>
                  <el-col :span="12"></el-col>
                </el-row>
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="24">
            <el-row type="flex"
                    align="middle"
                    justify="start">
              <el-col class="mc-ui-flex-start aligncenter"
                      :span="6">
                <div class="mc-test-tag">班级：</div>
                <el-input v-model="input"
                          placeholder="请输入要查询的班级"></el-input>
              </el-col>
              <el-col class="mc-ui-flex-start aligncenter"
                      :span="6">
                <div class="mc-test-tag">学号：</div>
                <el-input v-model="input"
                          placeholder="请输入要查询的学号"></el-input>
              </el-col>
              <el-col class="mc-ui-flex-start aligncenter"
                      :span="6">
                <div class="mc-test-tag">姓名</div>
                <el-input v-model="input"
                          placeholder="请输入要查询的姓名"></el-input>
              </el-col>

              <!-- 点击根据输入框的参数查找 -->
              <el-col class="mc-ui-flex-start"
                      :span="3">
                <el-button icon="el-icon-search">搜索</el-button>
              </el-col>
            </el-row>
          </el-col>

          //风险等级人数显示
          <el-col>
            <div class="levelcontainer">
              <div class="lelvelcountbox">
                <div class="levelleft">
                  <div class="title">
                    安全预警风险等级I人数</div>
                  <div class="countnumber countlevel1">1651</div>
                </div>
                <div class="levelright level1">

                </div>
              </div>
              <div class="lelvelcountbox">
                <div class="levelleft">
                  <div class="title">
                    安全预警风险等级II人数</div>
                  <div class="countnumber countlevel2">1651</div>
                </div>
                <div class="levelright level2">

                </div>
              </div>
              <div class="lelvelcountbox">
                <div class="levelleft">
                  <div class="title">
                    安全预警风险等级III人数</div>
                  <div class="countnumber countlevel3">1651</div>
                </div>
                <div class="levelright level3">

                </div>
              </div>
              <div class="lelvelcountbox">
                <div class="levelleft">
                  <div class="title">
                    安全预警风险等级IIII人数</div>
                  <div class="countnumber countlevel4">1001</div>
                </div>
                <div class="levelright level4">

                </div>
              </div>
              <div class="lelvelcountbox">
                <div class="levelleft">
                  <div class="title">
                    安全预警风险等级IIIII人数</div>
                  <div class="countnumber countlevel5">1369</div>
                </div>
                <div class="levelright level5">

                </div>
              </div>
            </div>

          </el-col>
          // 在校||不在校 切换
          <el-col>
            <el-row type="flex"
                    justify="space-between">
              <el-col class="mc-ui-flex-start"
                      :span="6">
                <div class="datachageswitch">
                  <el-switch v-model="isInSchool"
                             active-color="#ff4949"
                             inactive-color="#13ce66"
                             active-text="不在校"
                             inactive-text="在校"
                             @change="switchChange">
                  </el-switch>
                </div>

              </el-col>
              <el-col class="mc-ui-flex-end"
                      :span="9">
                <el-button icon="el-icon-refresh-right">刷新</el-button>
                <el-button icon="el-icon-edit-outline">导出</el-button>
              </el-col>
            </el-row>
          </el-col>

          // 表格
          <el-col>
            <div class="hometable">
              <el-table :data="tableData"
                        max-height="800"
                        border
                        style="width: 100%"
                        :row-class-name="tableRowClassName">
                <el-table-column prop="campus"
                                 label="校区"> </el-table-column>
                <el-table-column prop="college"
                                 label="系别"> </el-table-column>
                <el-table-column prop="discipline"
                                 label="专业">
                </el-table-column>
                <el-table-column prop="grade"
                                 label="班级"> </el-table-column>
                <el-table-column prop="id"
                                 label="学号"> </el-table-column>
                <el-table-column prop="name"
                                 label="姓名"> </el-table-column>
                <el-table-column prop="phone"
                                 label="电话"> </el-table-column>
                <el-table-column prop="level"
                                 label="风险等级">
                </el-table-column>
                <el-table-column width="400px"
                                 prop="description"
                                 label="判断风险原因">
                </el-table-column>
              </el-table>
              <div class="pagination">
                <el-pagination @current-change="changepage"
                               :page-size="pagesize"
                               :page-count="pagecount"
                               pager-count="10"
                               layout="prev, pager, next"
                               :total="total">
                </el-pagination>
              </div>
            </div>
          </el-col>

        </el-row>

        // 新增按钮
        <el-row>
          <el-button icon="el-icon-plus">新增</el-button>
        </el-row>
      </div>
      <div class="selectbuttonsbox"></div>
    </el-card>
  </div>
</template>

<script>
import {
  getStudentDetailNotInSchool,
  getStudentTotal,
} from "@/api/dashboard/absentDetailController";
import { getAllCollegeTree } from "@/api/backend/college";

export default {
  name: "StudentDetail",
  data () {
    return {
      tableData: [],
      // 页码
      pagecount: 0,
      // 分页 大小
      pagesize: 10,
      // 数据总数
      total: 0,
      // 是否在学校
      isInSchool: false,
      // 日期
      dateTime: "",
      // 校区、学院、班级tree
      collegeTree: [],
      universityList: [],
      collegeList: [],
      classList: [],
      currentUniversity: "0",
      currentCollege: "0",
      currentClass: "0",
      disciplines: [],
      // 学校选项
      schoolValue: "",
      schoolIndex: "",
      // 学院选项
      collegeValue: "",
      collegeIndex: "",
      classValue: "",
      grade: "",
      loading: false,
    };
  },
  async created () {
    this.collegeTree = await getAllCollegeTree();
    this.collegeTree.map((university) => {
      this.universityList.push(university.campus);
    });
    this.dateTime = this.$store.state.dashBoardData.date;
    this.getData(-1, -1, -1);
    this.isInSchool = this.$store.state.isInSchool;
    this.getDatas(this.isInSchool);
  },
  // 所有的methods
  methods: {
    // 
    schoolChange: function (e) {
      this.getData(e, -1, -1);
      this.schoolIndex = e;
    },
    collegeChange: function (e) {
      this.getData(this.schoolIndex, e, -1);
      this.collegeIndex = e;
    },
    // 跳转页面
    handlertiaozhuan (name) {
      this.$router.push({ name: name });
    },

    // 获取页面所需要的数据
    getData (universityIndex, collegeIndex, classIndex) {
      console.log(this.collegeList, collegeIndex);
      if (universityIndex != -1) {
        this.currentUniversity = {
          id: universityIndex,
          name: this.collegeTree[universityIndex].campus,
        };
        this.collegeList = this.collegeTree[universityIndex].colleges;
        if (
          collegeIndex == -1 &&
          this.universityIndex != this.currentUniversity.id
        ) {
          this.currentCollege = {
            id: collegeIndex,
            name: this.collegeList[0].name,
          };
        }
      }
      if (collegeIndex != -1) {
        this.currentCollege = {
          id: collegeIndex,
          name: this.collegeList[collegeIndex].name,
        };
        if (classIndex == -1 && this.currentCollege.id != collegeIndex) {
          this.currentClass = { id: classIndex, name: "" };
        }
      }
      if (collegeIndex != -1) {
        this.classList = this.collegeTree[universityIndex].colleges[
          collegeIndex
        ].disciplines;
        if (classIndex == -1) {
          this.currentClass = { id: classIndex, name: "" };
        }
      }
      if (classIndex != -1) {
        this.currentClass = {
          id: classIndex,
          name: this.classList[classIndex].name,
        };
      }
    },
    remoteMethodFindName (query) {
      if (query !== "") {
        this.loading = true;
        setTimeout(() => {
          this.loading = false;
          this.options = this.list.filter((item) => {
            return item.label.toLowerCase().indexOf(query.toLowerCase()) > -1;
          });
        }, 200);
      } else {
        this.options = [];
      }
    },
    // 切换 在校||不在校  显示
    switchChange () {
      this.$store.state.isInSchool = this.isInSchool;
      this.getDatas(this.isInSchool);
    },
    // 获取表格数据
    async getDatas (isInSchool) {
      let { msg: total } = await getStudentTotal(isInSchool);
      this.total = total;
      let { msg: data } = await getStudentDetailNotInSchool(
        this.pagecount,
        this.pagesize,
        isInSchool
      );
      this.tableData = data;
    },
    //
    async changepage (page) {
      this.pagecount = page;
      let { msg: data } = await getStudentDetailNotInSchool(
        this.pagecount,
        this.pagesize,
        this.isInSchool
      );
      this.tableData = data;
    },

    // 表格行隔行样式 绑定
    tableRowClassName ({ rowIndex }) {
      if (rowIndex % 2 === 1) {
        return "success-row";
      } else if (rowIndex % 2 === 0) {
        return "warning-row";
      }
      return "";
    },
  },
};
</script>

<style lang='less' scoped>
:deep(.warning-row) {
  background-color: #d3e5dc !important;
}

:deep(.success-row) {
  background-color: #fff !important;
}
/deep/ .pagination {
  display: flex;
  justify-content: center;
}
.studentdetail {
  width: 98%;
  .detailtable {
    width: 100% !important;
  }
}
.aligncenter {
  align-items: center !important;
  margin: 1rem 0;
}
.el-input {
  padding-right: 0.65rem;
}
.levelcontainer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 1.8rem 0;
  .lelvelcountbox {
    width: 14.25rem;
    height: 3.75rem;
    border-radius: 0.6rem;
    border: #808080 0.1rem solid;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .levelleft {
      display: flex;
      color: #000000;
      flex-direction: column;
      justify-content: space-between;
      margin-left: 1rem;
      .title {
        font-size: 0.6rem;
      }
      .countnumber {
        font-size: 0.9rem;
        display: flex;
        align-items: center;
        justify-content: flex-start;
      }
      .countlevel1 {
        color: #d81e06;
      }
      .countlevel2 {
        color: #fbb03b;
      }
      .countlevel3 {
        color: #0071bc;
      }
      .countlevel4 {
        color: #8cc63f;
      }

      .countlevel5 {
        color: #8cc63f;
      }
    }
    .levelright {
      width: 2.5rem;
      height: 2.5rem;
      background-size: contain;
      background-repeat: no-repeat;
      margin-right: 1rem;
    }
    .level1 {
      background-image: url("../../assets/studentdetail/red.png");
    }
    .level2 {
      background-image: url("../../assets/studentdetail/yellow.png");
    }
    .level3 {
      background-image: url("../../assets/studentdetail/blue.png");
    }
    .level4 {
      background-image: url("../../assets/studentdetail/green.png");
    }
    .level5 {
      background-image: url("../../assets/studentdetail/gray.png");
    }
  }
}
/deep/.hometable {
  margin-top: 1rem !important;
}
</style>